import * as React from "react";
import "./index.css";
import classnames from "classnames";
import { rownames, colnames } from "../../utils/constants";
import SudokuCls, { Grid } from "../../utils/SudokuCls";
import { observer } from "mobx-react";

interface IProps {
	sudoku: SudokuCls;
	gridClick: (grid: Grid) => void;
	type: string;
}

const Checkerboard: React.FunctionComponent<IProps> = observer(
	({ sudoku, gridClick, type }) => {
		return (
			<div className={`checkerboard p${type}`}>
				<div className="coordinate-row">
					{colnames[type].map((key) => (
						<span key={key} className="coordinate-block">
							{key}
						</span>
					))}
				</div>
				{sudoku &&
					sudoku.grids.map((row, rowIdx) => {
						const cls = classnames({
							"checkerboard-row": true,
							"last-row": rowIdx === sudoku.grids.length - 1,
							"multiple-of-three":
								type != "9" ? rowIdx % 2 === 1 : rowIdx % 3 === 2,
						});
						return (
							<div key={rowIdx} className={cls}>
								{row.map((grid, colIdx) => {
									const gridCls = classnames({
										"checkerboard-block": true,
										"is-choosed": grid.status.isChoosed,
										"is-inited": grid.status.isInit,
									});
									return (
										<span
											key={colIdx}
											className={gridCls}
											onClick={() => gridClick(grid)}
										>
											{grid.showNum}
										</span>
									);
								})}
							</div>
						);
					})}
				<div className="coordinate-col">
					{rownames[type].map((key) => (
						<span key={key} className="coordinate-block">
							{key}
						</span>
					))}
				</div>
			</div>
		);
	}
);

export default Checkerboard;
